<template>
<div id="mine">
    <div class="taro_page" style="min-height: 100%;">
      <div class="section">
        <div class="index-module__mine-head___2obk2">
          <div class="index-module__user-info___2zJbj">
            <div class="taro-img index-module__photo___1UKfy">
              <img :src="assets.touxiang" alt="" class="taro-img__mode-scaletofill">
            </div>
            <div class="index-module__nick-name___17xqI">
              <div class>
                <span class="taro-text">十月既望123</span>
                <div class="taro-img index-module__vip-icon___2vxsJ">
                  <img :src="assets.zuanshi" alt="" class="taro-img__mode-scaletofill">
                </div>
              </div>
              <div class>
                <span class="taro-text index-module__mobile-t___3pzYS">157****0300</span>
              </div>
            </div>
          </div>
          <div class="index-module__user-r___25GDl">
            <div class="index-module__user-msg-b___1sxJt" style="display: inline-block;">
              <div class="taro-img" style="width: 22px; height: 22px;">
                <img :src="imgUrl+'/upload/nZ38FGAB1wJ_8vDVVGwAAAABJRU5ErkJggg__.png'" alt="" class="taro-img__mode-scaletofill">
              </div>
              <div class="index-module__reddot-server___1wbZJ"></div>
            </div>
            <div class="index-module__vip-ent___SDep-">
              <div class="taro-img index-module__vip-ent-img___2Y8NU">
                <img :src="imgUrl+'/upload/icon_vip_card_new.png'" alt="" class="taro-img__mode-scaletofill">
              </div>
            </div>
          </div>
        </div>
        <div class="index-module__wallet-list-box___g0vJu">
          <div class="index-module__wallet-list___1FLFt">
              <div class="index-module__wallet-item___BOz1B index-module__my-wallet-item____d2dg">
                <div>
                  <div class="index-module__wallet-icon-v___1k7HT">
                    <div class="taro-img index-module__wallet-icon___2JtOh">
                      <img :src="imgUrl+'/upload/hckx1FdEBmBfCEigcLvM.png'" alt="" class="taro-img__mode-scaletofill">
                    </div>
                    <p class="taro-text index-module__wallet-t___fl6VJ">我的钱包</p>
                  </div>
                </div>
              </div>
              <div class="index-module__wallet-item___BOz1B">
                <div>
                  <div class="index-module__wallet-icon-v___1k7HT">
                    <span class="taro-text index-module__wallet-num___34hLy" style="font-size:13px">0</span>
                  </div>
                  <p class="taro-text index-module__wallet-t___fl6VJ" style="font-size:13px">红包</p>
                  <div class="index-module__msg-red-point___20z-1"></div>
                </div>
              </div>
              <div class="index-module__wallet-item___BOz1B">
                <div>
                  <div class="index-module__wallet-icon-v___1k7HT">
                    <span class="taro-text index-module__wallet-num___34hLy" style="font-size:13px">7</span>
                  </div>
                  <p class="taro-text index-module__wallet-t___fl6VJ" style="font-size:13px">优惠券</p>
                  <div class="index-module__msg-red-point___20z-1"></div>
                </div>
              </div>
              <div class="index-module__wallet-item___BOz1B">
                <div>
                  <div class="index-module__wallet-icon-v___1k7HT">
                    <span class="taro-text index-module__wallet-num___34hLy" style="font-size:13px">0</span>
                  </div>
                  <p class="taro-text index-module__wallet-t___fl6VJ" style="font-size:13px">鲜豆</p>
                  <div class="index-module__msg-red-point___20z-1"></div>
                </div>
              </div>
              <div class="index-module__wallet-item___BOz1B">
                <div>
                  <div class="index-module__wallet-icon-v___1k7HT">
                    <span class="taro-text index-module__wallet-num___34hLy" style="font-size:13px">6010</span>
                  </div>
                  <p class="taro-text index-module__wallet-t___fl6VJ" style="font-size:13px">白条</p>
                  <div class="index-module__msg-red-point___20z-1"></div>
                </div>
              </div>
          </div>
        </div>
        <div class="show-meta">
          <div class="taro-swiper-1 swiper-container index-module__channel-list___1yDvO swiper-container-initialized swiper-container-horizontal swiper-container-ios">
            <!-- <div>
              <style type="css">
                .taro-swiper-1 .swiper-pagination-bullet { background: #ededed };
                .taro-swiper-1 .swiper-pagination-bullet-active { background: #39ac69 };
              </style>
            </div> -->
            <div class="swiper-wrapper" style="transform: translate3d(0px, 0px, 0px);">
              <div class="swiper-slide swiper-slide-active" style="width: 375px;">
                <div class="taro-img taro-img__widthfix" style="width: 100%; height: auto;">
                  <img :src="imgUrl+'/upload/5b865df1N88d15639.png'" alt="" class="taro-img__mode-widthfix" style="width: 100%;margin:20px 0;">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="index-module__mine-list___3yULQ">
          <div class="index-module__mine-item____nDyI" v-for="mi in mines" :key="'mines'+mi.id">
            <div>
              <div class="taro-img index-module__user-item-icon___C28j7">
                <img :src="imgUrl+'/'+mi.imgUrl" alt="" class="taro-img__mode-scaletofill">  
              </div>
              <div>
                <span class="taro-text index-module__user-item-text___1CtOU">{{mi.title}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="index-module__logout-btn___1WQ3O">
          <div style="background:#ededed;height:8px;width:100%"></div>
          <span class="taro-text" @click="toLogin()">退出账号</span>
        </div>  
      </div>





<!-- style="width:93.75px;height:89.98px;display:flex" -->


    <div class="navigation footer-nav ipx-pad">
      <span class="navigation-item" @click="index()">
        <i class="iconfont1 icon-home"></i>
        <span class="navigation-item-label">首页</span>
      </span>
      <span class="navigation-item" @click="find()">
        <i class="iconfont2 icon-home"></i>
        <span class="navigation-item-label">发现</span>
      </span>
      <span class="navigation-item" @click="buy()">
        <i class="iconfont3 icon-home"></i>
        <span class="navigation-item-label">购物车</span>
      </span>
      <span class="navigation-item" @click="list()">
        <i class="iconfont4 icon-home"></i>
        <span class="navigation-item-label">订单</span>
      </span>
      <span class="navigation-item">
        <i class="iconfont5 icon-home"></i>
        <span class="navigation-item-label nav-item-label1">我的</span>
      </span>
    </div>
  </div>
</div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: 400;
  font-style: normal;
}
#mine {
  .taro_page {
    padding-bottom: 2.13333rem;
    line-height: 1.6;
    font-size: 23.4375px;
    font-family: -apple-system-font, "Helvetica Neue", sans-serif;
    width: 100%;
    .section {
      .index-module__mine-head___2obk2 {
        color: red;
        background: #fff;
        background-image: url("http://127.0.0.1:8088/upload/my_bgnew.png");
        background-size: cover;
        min-height: 115px;
        overflow: hidden;
        display: flex;
        .index-module__user-info___2zJbj {
          display: flex;
          flex: 1;
          align-items: center;
          .index-module__photo___1UKfy {
            margin-left: 13px;
            width: 60px;
            height: 60px;
            border-radius: 2.13333rem;
            border: solid 2px #fff;
          }
          .taro-img {
            display: inline-block;
            overflow: hidden;
            position: relative;
            font-size: 0;
            .taro-img__mode-scaletofill {
              width: 100%;
              height: 100%;
            }
          }
          .index-module__nick-name___17xqI {
            padding-left: 0.42667rem;
            font-size: 13px;
            color: #fff;
            .taro-text {
              user-select: none;
            }
            .taro-img {
              display: inline-block;
              overflow: hidden;
              position: relative;
              font-size: 0;
              .taro-img__mode-scaletofill {
                width: 100%;
                height: 100%;
              }
            }
            .index-module__vip-icon___2vxsJ {
              width: 15px;
              height: 13px;
              margin: 4px 0 0 8px;
              vertical-align: top;
            }
          }
          .index-module__mobile-t___3pzYS {
            color: #fff;
            user-select: none;
          }
        }
        .index-module__user-r___25GDl {
          position: relative;
          .index-module__user-msg-b___1sxJt {
            vertical-align: top;
            font-size: 0;
            padding: 0.42667rem;
            position: relative;
            .taro-img {
              display: inline-block;
              overflow: hidden;
              position: relative;
              font-size: 0;
              .taro-img__mode-scaletofill {
                width: 100%;
                height: 100%;
              }
            }
            .index-module__reddot-server___1wbZJ {
              position: absolute;
              right: 0.21333rem;
              top: 0.10667rem;
              width: 0.34133rem;
              height: 0.34133rem;
              border-radius: 0.17067rem;
              background: #ff5757;
            }
          }
          .index-module__vip-ent___SDep- {
            position: absolute;
            right: 0;
            bottom: -0.064rem;
            font-size: 0;
            .taro-img {
              display: inline-block;
              overflow: hidden;
              position: relative;
              font-size: 0;
              .taro-img__mode-scaletofill {
                width: 100%;
                height: 100%;
              }
            }
            .index-module__vip-ent-img___2Y8NU {
              width: 102px;
              height: 64.98px;
            }
          }
        }
      }
      .index-module__wallet-list-box___g0vJu {
        height: 70px;
        background: #fff;
        .index-module__wallet-list___1FLFt {
          display: flex;
          padding-top: 0.85333rem;
          padding-bottom: 0.42667rem;
          .index-module__wallet-item___BOz1B {
            flex: 1;
            text-align: center;
            font-size: 0.512rem;
            position: relative;
            height: 73px;
            .index-module__wallet-icon-v___1k7HT {
              height: 25px;
              line-height: 25px;
              .taro-img {
                display: inline-block;
                overflow: hidden;
                position: relative;
                font-size: 0;
                .taro-img__mode-scaletofill {
                  width: 100%;
                  height: 100%;
                }
              }
              .taro-text {
                user-select: none;
              }
              .index-module__wallet-t___fl6VJ {
                color: #333;
                line-height: 17px;
                font-size: 13px;
              }
              .index-module__msg-red-point___20z-1 {
                position: absolute;
                right: 0.74667rem;
                top: 0.10667rem;
                width: 0.34133rem;
                height: 0.34133rem;
                border-radius: 0.17067rem;
                background: #ff5757;
              }
              .index-module__wallet-icon___2JtOh {
                width: 25px;
                height: 25px;
              }
            }
          }
          .index-module__my-wallet-item____d2dg {
            padding-right: 0.42667rem;
            // background: url("http://127.0.0.1:8088/upload/hckx1FdEBmBfCEigcLvM.png")
            // center right no-repeat;
          }
        }
      }
      .show-meta {
        .index-module__channel-list___1yDvO {
          background: #fff;
          margin-top: 10px;
          font-size: 0;
          height: auto;
        }
        .swiper-container {
          margin: 0 auto;
          position: relative;
          overflow: hidden;
          list-style: none;
          padding: 0;
          z-index: 1;
          .swiper-wrapper {
            z-index: 1;
            display: flex;
            box-sizing: content-box;
            width: 100%;
            height: 100%;
            position: relative;
            .swiper-slide {
              flex-shrink: 0;
              .taro-img__widthfix {
                display: inline-block;
                overflow: hidden;
                position: relative;
                font-size: 0;
              }
            }
            .swiper-slide-active {
              height: 100%;
              position: relative;
            }
          }
        }
      }
      .index-module__mine-list___3yULQ {
        background: #fff;
        // margin-top: 10PX;
        .index-module__mine-item____nDyI {
          position: relative;
          display: inline-block;
          width: 25%;
          text-align: center;
          border-bottom: solid 0.02133rem #e8e8e8;
          .taro-img {
            display: inline-block;
            overflow: hidden;
            position: relative;
            font-size: 0;
            .taro-img__mode-scaletofill {
              width: 100%;
              height: 100%;
            }
          }
          .taro-text {
            user-select: none;
          }
          .index-module__user-item-text___1CtOU {
            font-size: 14px;
            color: #333;
            display: inline-block;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .index-module__user-item-icon___C28j7 {
            width: 43.98px;
            height: 43.98px;
          }
        }
      }
      .index-module__logout-btn___1WQ3O {
        margin: 10px 0;
        height: 66px;
        color: #ff5757;
        text-align: center;
        font-size: 16px;
        line-height: 46px;
        background-color: #fff;
        .taro-text {
          user-select: none;
        }
      }
    }

    .footer-nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      font-size: 12px;
      z-index: 1001;
      align-items: center;
      display: flex;
    }
    .navigation {
      align-items: center;
      background-image: linear-gradient(
        180deg,
        #e8e8e8,
        #e8e8e8 50%,
        transparent 0
      );
      background-size: 100% 1px;
      background-repeat: no-repeat;
      background-position: 0 0;
      background-color: #fff;
      height: 50px;
      .navigation-item {
        display: inline-block;
        width: 75px;
        position: relative;
        color: #555;
        flex: 1 1;
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 0%;
        flex-direction: column;
        height: 100%;
        justify-content: center;
        text-align: center;
        // color: #39ac69;
        display: flex;
        .iconfont1 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center 0;
        }
        .iconfont2 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -601px;
        }
        .iconfont3 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -100px;
        }
        .iconfont4 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -200px;
        }
        .iconfont5 {
          background: url("http://127.0.0.1:8088/upload/nav6.fe8f6378.png")
            no-repeat;
          height: 30px;
          background-size: 24px auto;
          background-position: center -350px;
        }
        .navigation-item-label {
          display: block;
          height: 20px;
          line-height: 17px;
        }
        .nav-item-label1 {
          color: #39ac69;
        }
      }
    }
  }
}
</style>

<script>
export default {
  data() {
    return {
      mines: []
    };
  },
  created() {
    this.getMines();
  },
  methods: {
    async getMines() {
      var { data, data: { result } } = await this.axios({
        methods: "get",
        url: "/mines"
      });
      this.mines = result;
    },
    index() {
      this.$router.push({
        name: "index"
      });
    },
    find() {
      this.$router.push({
        name: "find"
      });
    },
    buy() {
      this.$router.push({
        name: "buy"
      });
    },
    list() {
      this.$router.push({
        name: "list"
      });
    },
    toLogin(){
      this.$router.push({
        name: "login"
      });
    }
  }
};
</script>





